<template>
  <div class="wrap">
    <p class="title">置顶组件(兼容置底等位置)</p>
    <div class="content">
      这是内容，请滚动到底
    </div>
    <to-top :direction="'top'" @onClick="clickOnTopBtn">
      <div class="top-content">
        <svg width="25px" height="22px" t="1635149116473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399">
          <path fill="#2a8ee3"
            d="M966.4 668.8l-435.2-432c-9.6-9.6-25.6-9.6-35.2 0l-441.6 432c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l425.6-416 416 416c9.6 9.6 25.6 9.6 35.2 0S976 678.4 966.4 668.8z"
            p-id="2400"></path>
        </svg>
      </div>
    </to-top>
  </div>
</template>

<script>
import { ToTop } from '$root/components'
// import { Round } from '../../dist/tcfe-helper.js';

export default {
  name: 'el-toTop',
  data() {
    return {}
  },
  components: {
    ToTop
  },
  methods: {
    clickOnTopBtn() {
      console.log('点置顶啦')
      this.$toast('你好,message!')
      // let message = ''
      // this.$message({
      //   title: '请重新选择出发城市',
      //   message: `当前城市<span style="color: #FF7B68">暂不支持</span>提前预约通道
      //           <div style="text-align: left;font-size: .28rem">${message}</div>`,
      //   buttons: [
      //     {
      //       text: "<span style='color: #0DD66C;'>确定</span>",
      //       callback: () => {}
      //     }
      //   ]
      // })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~$common/funs.less';
.wrap {
  padding: 0 15px;
  .title {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin: 40px auto;
  }
  .content {
    height: 1600px;
    width: 100%;
    background: #2a8ee3;
    color: #fff;
    .-flex-layout();
    font-size: 40px;
  }
  .top-content {
    width: 100%;
    height: 100%;
    .-flex-layout();
    background-color: #fff;
    border-radius: 50%;
  }
}
</style>
